<template>
  <view class="detail">
      <view class="content">
          <view class="text">
              <view class="left">
                <view class="name">{{ticket.title}}</view>
                <view class="time">有效期&nbsp;&nbsp;{{ticket.expire_at}}</view>
                <view class="code">核销码：{{ticket.number}}</view>
              </view>
              <view class="right">
                  <text>{{ticket.is_use=== 0 ? '未使用' : "已使用"}}</text>
              </view>
          </view>
          <view class="qrcode">
            <view class="state">出示此二维码给店家核销</view>
            <image :src="qrimg" class="QR-code" id="QR-code" ref="qrcode"></image>
            <!-- <rich-text :nodes="strings"></rich-text> -->
            <!-- <canvas  class="QR-code"  id="QRcode"></canvas> -->
            <view class="state">该活动由商家发行提供并承担相关责任</view>
          </view>
        <view class="tools">
            <button class="btn my" type="default">1商1户1位1置
            </button>
            <button  class="btn one" type="default">商户主页
            </button>
        </view> 
      </view>
  </view>
</template>

<script>
import canvas from 'qrcode'
import { cardDetail} from '../../api/content'
export default {
    data () {
        return {
            ticket: { },
            qrimg:'',
            user:uni.getStorageSync('user')
        }
    },
    onLoad:async function(option) {
        let {id}=option
      await  this.getCardInfo(id)
      await  this.creatQrCode()
    },
    onReady:function(){
    },
    methods: {
        // 获取数据
        async getCardInfo(id){
          this.ticket=  await cardDetail({
                get_card_id: id,
                user_id: this.user.user_id,
                activity_id: this.user.id
            })
            console.log(this.ticket);
        },
        // 二维码
       async creatQrCode() {
         let res=await canvas.toDataURL(this.ticket.qr_url)
        //  console.log(res);
         this.qrimg=res
        // #ifdef MP-WEIXIN
        //  let ctx = uni.createCanvasContext('QRcode')
        //  console.log(ctx);
        //   uni.downloadFile({
        //     url: res, //
        //     success:(res)=>{
        //         if (res.statusCode === 200) {
        //             this.qrimg=res.tempFilePath
        //             // ctx.drawImage(res.tempFilePaths, 0, 0, 150, 100)
        //             // ctx.draw()
        //         }
        //     }
        //  });
        // #endif
        }
    }
}
</script>

<style lang="scss" scoped>

.detail {
    padding-top: 16px;
    .content {
        position: relative;
        width: 343 / 375 * 100vw;
        height: 500 /375 * 100vw;
        background: url("@/static/bgcontent.png") no-repeat top;
        background-size: contain;
        border-radius: 10px 10px 0 0;
        margin: 0  auto;
        padding-top: 16 / 375 * 100vw;
        .text {
            position: relative;
            width: 311 / 375 * 100vw;
            height: 96 / 375 * 100vw;
            background: url("@/static/bgtext.png") no-repeat top;
            background-size: contain;
            margin: 0 auto 16 / 375 * 100vw;
            display: flex;
            align-items: center;
            .left {
                flex: 1;
                max-width: 210 / 375 * 100vw;
                max-height: 100%;
                font-size: 12px;
                font-weight: 500;
                color: #666666;
                padding-left: 16 / 375 * 100vw;
                .name{
                    font-size: 14 / 375 * 100vw;
                    font-weight: bold;
                    color: #333333;
                }
                .time {
                    margin: 4 / 375 * 100vw 0;
                }
            }
            .right {
                // flex: 1;
                width: 92 / 375 * 100vw;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                font-weight: bold;
                color: #333333;
            }
        }
        .qrcode {
            width: 311 / 375 * 100vw;
            margin: 0 auto 16 / 375 * 100vw;
            text-align: center;
            .QR-code {
                margin: 16 / 375 * 100vw auto 12 / 375 * 100vw;
                width: 208 / 375 * 100vw;
                height: 208 / 375 * 100vw;
            }
            .state {
            font-size: 12 / 375 * 100vw;
            font-weight: 500;
            color: #666666;
        }
        }
        
    }
}
.tools{
  display: flex;
  justify-content:space-between;
  width: 311 / 375 * 100vw;
  margin: 0 auto;
  .btn{
    width: 148 / 375 * 100vw;
    height: 48 / 375 * 100vw;
    background-image: linear-gradient(to right, $bg-color-l , $bg-color-r);
    color: #FFFFFF;
    border-radius: 100px;
  }

}
</style>